<template>
  <div class="container">
    <div class="shopname">{{shopname}}</div>
    <div class="record">
      <div class="record_header">
        <span class="shu"></span>门店经营数据
      </div>
      <ul class="record_ul">
        <li class="flex">
          <span class="flex-item words">年度门店数据</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">门店经营分析</span>
          <span class="grey_arrow"></span>
        </li>
      </ul>
    </div>

    <div class="record">
      <div class="record_header">
        <span class="shu"></span>客户数据
      </div>
      <ul class="record_ul">
        <li class="flex" data-url="/pages/guest/dataAnalysis/membershipConsumptionStatistics" @tap="goDataAnalysis">
          <span class="flex-item words">会员消费统计表</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex" data-url="/pages/guest/dataAnalysis/membershipBasicInformation" @tap="goDataAnalysis">
          <span class="flex-item words">会员基础信息表</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex" data-url="/pages/guest/dataAnalysis/hibernatingCustomerAnalysisData" @tap="goDataAnalysis">
          <span class="flex-item words">休眠顾客分析信息表</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex" data-url="/pages/guest/dataAnalysis/customerArrivalAnalysis" @tap="goDataAnalysis">
          <span class="flex-item words">顾客到店分析表</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex" data-url="/pages/guest/dataAnalysis/targetCustomerDemandAnalysis" @tap="goDataAnalysis">
          <span class="flex-item words">目标客户需求分析表</span>
          <span class="grey_arrow"></span>
        </li>
        <!-- <li class="flex">
          <span class="flex-item words">客户消费结构</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">客户到店次数</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">客户业绩增长比</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">客户性别构成</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">客户年龄分布</span>
          <span class="grey_arrow"></span>
        </li> -->
      </ul>
    </div>

    <!-- <div class="record">
      <div class="record_header">
        <span class="shu"></span>品牌品相分析
      </div>
      <ul class="record_ul">
        <li class="flex">
          <span class="flex-item words">品牌经营分析表</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">品牌每月业绩</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">卡类经营分析表</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">卡类每月业绩</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">项目经营分析表</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">项目每月业绩</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">家居经营分析</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">家居每月业绩</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">产品库存与消耗</span>
          <span class="grey_arrow"></span>
        </li>
      </ul>
    </div> -->

    <div class="record">
      <div class="record_header">
        <span class="shu"></span>员工数据
      </div>
      <ul class="record_ul">
        <li class="flex" data-url="/pages/guest/dataAnalysis/employeeAttendanceData" @tap="goDataAnalysis">
          <span class="flex-item words">员工考勤数据</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex" data-url="/pages/guest/dataAnalysis/employeeWageData" @tap="goDataAnalysis">
          <span class="flex-item words">员工工资数据</span>
          <span class="grey_arrow"></span>
        </li>
        <!-- <li class="flex">
          <span class="flex-item words">员工业绩分析</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">员工出勤分析</span>
          <span class="grey_arrow"></span>
        </li>
        <li class="flex">
          <span class="flex-item words">员工工资分析</span>
          <span class="grey_arrow"></span>
        </li> -->
      </ul>
    </div>
  </div>
</template>

<script>
// Use Vuex
export default {
  data () {
    return {
      windowHeight: 0,
      shopname: '',
      shopid: 0
    }
  },
  onLoad (option) {
    console.log(option)
    if (option) {
      this.shopname = option.name
      this.shopid = option.shopid
    }
  },
  computed: {
  },
  methods: {
    goDataAnalysis (e) {
      let urls = e.mp.currentTarget.dataset.url
      this.$router.push({ path: urls, query: { shopid: this.shopid } });
    }
  }
}
</script>

<style scoped>
.record {
  width: 100%;
  background: #fff;
  margin-bottom: 23rpx;
}
.record .record_header {
  width: 100%;
  padding-top: 38rpx;
  padding-left: 32rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 22rpx;
}
.record .record_header .shu {
  display: inline-block;
  width: 4rpx;
  height: 20rpx;
  background: RGBA(255, 68, 68, 1);
  margin-right: 12rpx;
}
.record_ul {
  width: 100%;
  padding-left: 48rpx;
}
.record_ul li {
  padding-bottom: 20rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  padding-right: 46rpx;
  position: relative;
  padding-top: 18rpx;
}
.record_ul li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2rpx;
  background: rgba(153, 153, 153, 0.1);
}
.record_ul li .grey_arrow {
  display: inline-block;
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
}
.shopname {
  width: 100%;
  height: 60rpx;
  font-size: 32rpx;
  color: #ff4444;
  text-align: center;
  line-height: 60rpx;
  background: #fff;
  margin-bottom: 20rpx;
}
</style>
